<template>
    <el-dialog v-model="props.show" width="900" :before-close="showDialog">
        <el-descriptions :title="('名称：' + props.caseData.name)" :column="3" border>
            <el-descriptions-item label="创建人" label-align="right" align="center" label-class-name="my-label"
                class-name="my-content" width="150px">
                {{ props.caseData.creator }}
            </el-descriptions-item>
            <el-descriptions-item label="创建时间" label-align="right" align="center">
                {{ formatDate(props.caseData.createTime, "YYYY-MM-DD HH:mm:ss") }}
            </el-descriptions-item>
            <el-descriptions-item label="请求方式" label-align="right" align="center">
                {{ props.caseData.type }}
            </el-descriptions-item>
            <el-descriptions-item label="执行状态" label-align="right" align="center">
                <el-tag size="small">{{ props.caseData.status }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="更新时间" label-align="right" align="center">
                {{ formatDate(props.caseData.updateTime, "YYYY-MM-DD HH:mm:ss") }}
            </el-descriptions-item>
            <el-descriptions-item label="用例等级" label-align="right" align="center">
                {{ props.caseData.level }}
            </el-descriptions-item>
            <el-descriptions-item label="接口路径" label-align="right" align="center">
                {{ props.caseData.apiPath }}
            </el-descriptions-item>
        </el-descriptions>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="emit('close')">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>

// 定义props，接收父组件传递的参数
const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    caseData: {
        type: Object,
        default: () => ({})
    }
})

const emit = defineEmits(['close'])

// 关闭弹窗
const showDialog = () => {
    emit('close');
}

</script>

<style scoped></style>